<template>
  <div class="box">
    <my-title-header :title="title"></my-title-header>
    <div v-if="getterPlaceList.length>0">
      <div class="item-box">
        <div v-for="(item,index) in getterPlaceList" @click="chooseSchool(item)">
          <div class="item-logo-box">
            <i class="iconfont" :class="item.className"></i>
          </div>
          <div class="item-school">
            <span class="item-name">{{item.place_name}}</span>
          </div>
        </div>
      </div>
      <my-next :isNextActive="isNextActive" @next="submit"></my-next>
    </div>
    <bottom v-once></bottom>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';
  import {Toast} from 'mint-ui';
  import Next from '../components/Next.vue';
  import TitleHeader from '../components/TitleHeader.vue';

  export default {
    name: "",
    components: {
      'my-next': Next,
      'my-title-header': TitleHeader
    },
    created: function () {
      this.form.mobile = this.$route.query.mobile;
    },
    computed: {
      ...mapGetters([
        'getterPlaceList'
      ])
    },
    data: function () {
      return {
        title: '选择场所',
        isNextActive: false,
        form: {}
      }
    },
    methods: {
      go() {
        this.$router.push('/renew')
      },
      submit() {
        if (this.isNextActive) {
          this.$store.dispatch('getPlaceInfo', this.form);
        } else {
          Toast('请选择场所');
        }
      },
      /***
       * 选择学校的
       * @param index当前学校的索引
       */
      chooseSchool: function (item) {
        this.isNextActive = true;
        this.form.user_id = item.user_id;

        this.form.place_id = item.place_id;
      },
    }
  }
</script>

<style scoped>
  @import '../assets/iconfont/iconfont.css';
  /*有多个场所时的样式*/
  .item-box {
    height: 3.15rem
  }

  .item-box > div {
    width: 100%;
    height: 0.63rem;
    line-height: 0.63rem;
    border-bottom: 1px solid #efefef;
    box-sizing: border-box;
    padding-left: 0.19rem;
    overflow: hidden;
    cursor: pointer;
  }

  .item-box > div:hover {
    color: #00aaff;
    border-bottom: 1px solid #00aaff;
  }

  .item-box > div > div {
    float: left;
  }

  .item-box .item-logo-box {
    margin-top: 0.115rem;
    width: 0.4rem;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    margin-right: 0.12rem;
    border-radius: 50%;
    background-color: #bbb;
    border: none;
    overflow: hidden;
  }

  .item-box .item-logo-box .iconfont {
    font-size: 0.2rem;
  }

  .item-box .item-name {
    font-size: 0.14rem;
  }

</style>
